<template>
  <div>
    <el-table
      :data="tableData6"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="name" label="姓名"></el-table-column>

      <el-table-column prop="amount1" label="数值 1（元）"></el-table-column>

      <el-table-column prop="amount3" label="数值 3（元）"></el-table-column>

      <el-table-column prop="id" label="序号"></el-table-column>

      <el-table-column prop="id" label="序号"></el-table-column>

      <el-table-column prop="id" label="序号"></el-table-column>

      <el-table-column prop="id" label="序号"></el-table-column>

      <el-table-column prop="id" label="序号"></el-table-column>

      <el-table-column prop="id" label="序号"></el-table-column>

      <el-table-column prop="id" label="序号"></el-table-column>

      <el-table-column prop="id" label="序号"></el-table-column>

      <el-table-column prop="id" label="序号"></el-table-column>

      <el-table-column prop="id" label="出勤率" width="90">
        <template slot="header">
          <span @click="showModeal" style="cursor:pointer">出勤率{{title}}</span>
        </template>
      </el-table-column>

      <template v-if="restShow">
        <el-table-column prop="name" label="姓名"></el-table-column>

        <el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title:"<<<",
      restShow: false,
      tableData6: [
        {
          id: "0",
          name: "王小虎",
          amount1: "234",

          amount3: 10
        },
        {
          id: "1",
          name: "王小虎",
          amount1: "234",

          amount3: 10
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "165",

          amount3: 12
        },
        {
          id: "3",
          name: "王小二",
          amount1: "324",

          amount3: 9
        },
        {
          id: "4",
          name: "王小二",
          amount1: "621",

          amount3: 17
        },
        {
          id: "5",
          name: "王小六",
          amount1: "539",

          amount3: 15
        },
        {
          id: "6",
          name: "王小六",
          amount1: "539",

          amount3: 15
        },
        {
          id: "7",
          name: "王小八",
          amount1: "539",

          amount3: 15
        },
        {
          id: "8",
          name: "王小八",
          amount1: "539",

          amount3: 15
        }
      ],
      spanArr: [], //用于存放每一行记录的合并数
      pos: 0,

      spanArTwo: [], //用于存放每一行记录的合并数
      poTwo: 0
    };
  },
  mounted() {
    this.getSpanArr(this.tableData6);
    this.getSpanArTwo(this.tableData6);
  },
  methods: {
    showModeal() {
      this.restShow = !this.restShow;
    },
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].name === data[i - 1].name) {
            //  console.log('/////')
            // console.log(this.spanArr)
            // console.log(this.pos)
            // console.log('/////')
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }

      /*
             i=0  [1]        pos=0
             i=1  [2,0]      pos=0
             i=2  [3,0,0]    pos=0
             i=3  [3,0,0,1]  pos=3
             i=4  [3,0,0,2,0]  pos=3
             i=5  [3,0,0,2,0,1]  pos=5
             i=6  [3,0,0,2,0,2,0]  pos=5
             i=7  [3,0,0,2,0,2,0,1]  pos=7
             i=8  [3,0,0,2,0,2,0,2,0]  pos=7
            */
    },
    getSpanArTwo(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArTwo.push(1);
          this.poTwo = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (
            data[i].amount1 === data[i - 1].amount1 &&
            data[i].name === data[i - 1].name
          ) {
            //  console.log('/////')
            // console.log(this.spanArTwo)
            // console.log(this.pos)
            // console.log('/////')
            this.spanArTwo[this.poTwo] += 1;
            this.spanArTwo.push(0);
          } else {
            this.spanArTwo.push(1);
            this.poTwo = i;
          }
        }
      }

      /*
             i=0  [1]        pos=0
             i=1  [2,0]      pos=0
             i=2  [3,0,0]    pos=0
             i=3  [3,0,0,1]  pos=3
             i=4  [3,0,0,2,0]  pos=3
             i=5  [3,0,0,2,0,1]  pos=5
             i=6  [3,0,0,2,0,2,0]  pos=5
             i=7  [3,0,0,2,0,2,0,1]  pos=7
             i=8  [3,0,0,2,0,2,0,2,0]  pos=7
            */
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row) //行里面的数据
      // console.log(column) //
      //console.log(rowIndex) //有多少行 从0开始 0-7 行
      // console.log(columnIndex) //有多少列 从0开始  0-3 列

      //console.log('/////')
      //console.log(this.spanArr)
      // console.log(rowIndex)
      //console.log('/////')

      //  i=8  [3,0,0,2,0,2,0,2,0]  pos=7

      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }

      if (columnIndex === 1) {
        const _row = this.spanArTwo[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }

      //  if (columnIndex === 0) {    //用于设置要合并的列
      //     if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
      //       return {
      //         rowspan: 2,　　　　　//合并的行数
      //         colspan: 1          //合并的列数，设为０则直接不显示
      //       };
      //     } else {
      //       return {
      //         rowspan: 0,
      //         colspan: 0
      //       };
      //     }
      // }
    }
  }
};
</script>